<template>
  <div>
    <!--副导航-->
    <div class="fudaohang">
      <nuxt-link to="/otc">
        <div class="shang">
          <h2>{{ $t('法币交易') }}</h2>
          <p>{{ $t('安全、便捷、快速买卖数字货币') }}</p>
          <img src="@/assets/images/pt1.jpg" />
        </div>
      </nuxt-link>
      <nuxt-link to="/user/service">
        <div class="xia left">
          <h2>{{ $t('帮助中心') }}</h2>
          <p>{{ $t('有问题找我') }}</p>
          <img src="@/assets/images/pt2.jpg" />
        </div>
      </nuxt-link>
      <nuxt-link
        :to="{ name: 'user-notice', params: { type: 'announcement' } }"
      >
        <div class="xia">
          <h2>{{ $t('公告中心') }}</h2>
          <p>{{ $t('公告栏') }}</p>
          <img src="@/assets/images/pt3.jpg" />
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<style scoped>
/*副导航*/
.fudaohang {
  width: 100%;
  overflow: hidden;
}
.fudaohang .shang {
  width: 96%;
  padding: 0 2%;
  height: 80px;
  border-bottom: 1px solid #f3f3f3;
  position: relative;
}
.fudaohang .shang h2 {
  font-size: 16px;
  color: #173e5d;
  line-height: 50px;
}
.fudaohang .shang p {
  color: #666;
}
.fudaohang .shang img {
  position: absolute;
  right: 4%;
  top: 0;
  width: auto;
  height: 100%;
}
.fudaohang .xia {
  width: 46%;
  padding: 0 2%;
  height: 80px;
  position: relative;
  float: left;
}
.fudaohang .xia h2 {
  font-size: 16px;
  color: #173e5d;
  line-height: 50px;
}
.fudaohang .xia p {
  color: #666;
}
.fudaohang .xia img {
  position: absolute;
  right: 10%;
  top: 20%;
  width: auto;
  height: 60%;
}
.fudaohang .left {
  border-right: 1px solid #f3f3f3;
  box-sizing: border-box;
}
</style>
